<template>
  <div>
    <van-search
      @blur="handlerBlur"
      v-model="item"
      show-action
      placeholder="请输入商品名称"
      @cancel="$router.go(-1)"
      @input="tosearchList"
    />
    <div v-show="!item" class="noitem">
      <span class="hot"
        >历史记录
        <van-icon name="delete-o" class="icon" @click="handlerDelete"></van-icon
      ></span>

      <span class="span">
        <van-tag
          class="tag"
          type="primary"
          plain
          v-for="(item, index) in historyList"
          @click="todetail1List(item)"
          :key="index"
          >{{ item }}</van-tag
        >
      </span>
      <!-- 横线 -->
      <span class="hot">热门搜索</span>
      <span v-for="(item, index) in hotList" :key="index">
        <van-tag @click="todetail1List(item.keyword)" class="tag" plain>{{ item.keyword }}</van-tag>
      </span>
    </div>
    <div v-show="item" class="yesitem">
      <div class="itemlist" v-for="(item,index) in searchList" :key="index" @click="todetailList(index)">
        <div class="inner">{{item}}</div>
        <div><i>></i></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHotList, reqsearchAuto} from "@/api/index.js";
export default {
  data() {
    return {
      hotList: [],
      historyList: [],
      item: "",
      searchList:[],
      directlyList:[]
    };
  },
  name: "",
  // async mounted() {
  //   let result = await reqHotList();
  //   this.hotList = result.data.hotKeywordVOList;
  // },
  mounted() {
    this.gethotlist()
  },
  methods: {
    async gethotlist(){
      let result = await getHotList();
    if (result.code == 200) {
      this.hotList = result.data.hotKeywordVOList;
      this.getHistorytList();
    }
    },
    handlerBlur(e) {
      const item = e.target.value.trim();

      if (!item) {
        return;
      }

      if (this.historyList.length && this.historyList.indexOf(item) != -1) {
        this.historyList.splice(this.historyList.indexOf(item), 1);
        this.historyList.unshift(item);
        //保存到本地
        localStorage.setItem("historyList", JSON.stringify(this.historyList));
      } else {
        this.historyList.unshift(item);
        localStorage.setItem("historyList", JSON.stringify(this.historyList));
      }
    },

    getHistorytList() {
      this.historyList = JSON.parse(localStorage.getItem("historyList"));
      this.historyList = this.historyList ? this.historyList : [];
    },

    handlerDelete() {
      if (confirm("确定删除历史记录")) this.historyList = [];
      localStorage.removeItem("historyList");
    },
    async tosearchList() {
      let result = await reqsearchAuto(this.item);
      if(result.code == 200){
        this.searchList = result.data
      }else{
        alert(result.message)
      }
    },
    async todetailList(index){
      let keyword = this.searchList[index]
      
      if(this.historyList.indexOf(keyword) == -1){
        this.historyList.unshift(keyword)
        localStorage.setItem("historyList", JSON.stringify(this.historyList));
      }
      this.item = keyword
      this.$router.push({
        path:'/searchlist',
        query:{keyword}
      })
      
    },
    async todetail1List(keyword){
      if(this.historyList.indexOf(keyword) == -1){
        this.historyList.unshift(keyword)
        localStorage.setItem("historyList", JSON.stringify(this.historyList));
      }
      this.item = keyword
      this.$router.push({
        path:'/searchlist',
        query:{keyword}
      })
    }
  },
};
</script>

<style lang='less' >
.hot {
  display: block;
  font-size: 16px;
  margin-left: 20px;
  margin-bottom: 10px;
  color: rgb(153, 153, 153);
}
.hot .icon {
  color: red;
  float: right;
  margin-right: 10px;
}
.span {
  display: inline-block;
  height: 50px;
}
.line {
  width: 80%;
  border: 1px solid rgb(153, 153, 153);
  margin: 20px 0px 10px 20px;
}
.tag {
  height: 20px;
  width: max-content;
  margin: 10px 10px;
  color: rgb(153, 153, 153);
}
.yesitem{
  padding-left: 15px;
  height: 50px;
  .itemlist{
    // display: flex;
    box-sizing: border-box;
    float: left;
    width: 100%;
    height: 50px;
    font-size: 16px;
    padding-right: 20px;
    border-bottom: 2px solid #d9d9d9;
    .inner{
      float: left;
      height: 50px;
      line-height: 50px;
      color: #333;
    }
    i{
      float: right;
      height: 50px;
      line-height: 50px;
    }
  }
}
</style>